/* eslint-disable react-hooks/exhaustive-deps */
import React,{ Fragment,useState ,useEffect} from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import TopBar from '../../../components/TopBar/TopBar'
import FloorBar from '../../../components/FloorBar/FloorBar'
import CommentContent from '../../../components/CommentContent/CommentContent'

import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'

import utils from '../../../util/utils'
import http from '../../../util/http'

function BlogDetail() {
  const navigate = useNavigate ();
  const location = useLocation();
  const params= useParams();
  console.log(location,params)

  const [blog,setBlog] = useState({
    Id:1,
    Title:"标题标题标题",
    UserId:'1',
    User:{
      Id: "1",
      Nickname: "范征远",
      AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      PhoneNumber: "13142211138",
      Email: "1954418428@qq.com",
      Sex: 1,
      Birthday: '2000-11-10',
      Description: `怀化学院本科毕业，23届应届生，专业成绩优，参加各种比赛。
          喜欢挑战，酷爱难的东西。热爱前端技术，对各种前端后端、算法等知识技术都比较熟悉。
          后续会在本网站上依次推出这些课程。`
    },
    ImgUrl:"https://10.idqqimg.com/qqcourse_logo_ng/ajNVdqHZLLAf1icyicZicuHUIBe2zic6UiaCwA4ekE7QJdGicagv0WIHBOt6cvuAI2LibupjCZKrdns5fI/356",
    Content:`<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>`,
    Description:"描述描述描述描述描述描述描述描述描述描述描述描述描述",
    Count:{
      LikeCount:11,
      CollectCount:22,
      VisitCount:33,
      CommentCount:44,
      ResourceId:'1',
      ResourceType:1
    },
    Tags:"['前端','后端','react']",
    CreateTime:"2012-10-10 13:50",
    CategoryList:[
      {
        Id:"1",
        CategoryName:"类别1"
      },
      {
        Id:"2",
        CategoryName:"类别2"
      },
      {
        Id:"3",
        CategoryName:"类别3"
      }
    ],
  })
  
  const [editor, setEditor] = useState(null)  
  const editorConfig = {                         // JS 语法
    readOnly:true
  }
  useEffect(() => {
    return () => {
        if (editor == null) return
        editor.destroy()
        setEditor(null)
    }
  }, [editor])

  const [commentList,setCommentList] = useState([
    {
      Id:'1',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'2',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    },
    {
      Id:'3',
      ParentId:0,
      UserId:"1",
      User:{
        Id: "1",
        Nickname: "范征远",
        AvatarUrl: "https://img2.baidu.com/it/u=2015865969,3401990894&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666630800&t=0e56d590792d305dab1d410186dab3aa",
      },
      Content:"评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论评论",
      ResourceId:"1",
      ResourceType:1,
      CreateTime:"2020-10-26 14:21",
    }
  ])

  useEffect(() => {

  }, [])

  return (
    <Fragment >
      <TopBar activeIndex={2} ></TopBar>
      
      <div className="blog-detail root-cont">
        <div className="blog-detail-wrap">
            <div className="left-box">
            
              <div className="blog-wrap">
                <div className="blog-title">
                  {blog.Title}
                </div>
                
                <div className="blog-author">
                  <div className="author-img-warp">
                    <img src={blog.User.AvatarUrl} alt="" />
                  </div>
                  <div>
                    <div>
                      {blog.User.Nickname}
                    </div>
                    <div style={{color: '#8a919f'}}>
                      <span style={{marginRight: '0.75rem'}}>
                        {blog.CreateTime}
                      </span>

                      <span>
                        阅读{blog.Count.VisitCount}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="blog-img">
                  <img src={blog.ImgUrl} alt="" />
                </div>
                <div className="blog-cont">
                  <Editor
                      defaultConfig={editorConfig}
                      value={blog.Content}
                      onCreated={setEditor}
                      mode="default"
                      style={{ minHeight: '500px'}}
                  />
                </div>
              </div>
              
              <div className="comment-wrap">
                {
                  commentList && commentList.map((item,index)=>(
                    <dir className="comment-item" key={index}>
                      <CommentContent Comment={item}></CommentContent>
                    </dir>
                  ))
                }
              </div>

             
            </div>

            <div className="right-box">

            </div>
        </div>

       
      </div>

  

      <FloorBar></FloorBar>        
    </Fragment>

  )
}

export default BlogDetail;